<template>
  <div class="custome-table">
    <el-form :disabled="detail">
      <div class="table-title">水污染源自动监测仪校验记录</div>
      <div class="custom-table">
        <table class="w24">
          <tr class="hide">
            <td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td /><td />
          </tr>
          <tr>
            <td class="center" colspan="4">站点名称</td>
            <td class="center" colspan="4"><el-input v-model="form.key0" /></td>
            <td class="center" colspan="4">仪器类别</td>
            <td class="center" colspan="4"><el-input v-model="form.key1" /></td>
            <td class="center" colspan="4">型号</td>
            <td class="center" colspan="4"><el-input v-model="form.key2" /></td>
          </tr>
          <tr>
            <td class="center" colspan="4">月次</td>
            <td class="center" colspan="4"><el-input v-model="form.key3" /></td>
            <td class="center" colspan="4">日期</td>
            <td class="center date w100" colspan="4"><el-date-picker v-model="form.key4" type="date" value-format="yyyy-MM-dd" /></td>
            <td class="center" colspan="4">时间</td>
            <td class="center date w100" colspan="4"><el-date-picker v-model="form.key5" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" /></td>
          </tr>
          <tr>
            <td rowspan="12" colspan="4" class="center">校验</td>
            <td colspan="2">第一次</td><td colspan="2">质控样1</td>
            <td colspan="4">质控样2</td><td colspan="4">水样1</td>
            <td colspan="4">水样2</td><td colspan="4">水样3</td>
          </tr>
          <tr>
            <td colspan="2">标准值</td>
            <td colspan="2"><el-input v-model="form.key6" /></td>
            <td colspan="4"><el-input v-model="form.key7" /></td>
            <td colspan="4"><el-input v-model="form.key8" /></td>
            <td colspan="4"><el-input v-model="form.key9" /></td>
            <td colspan="4"><el-input v-model="form.key10" /></td>
          </tr>
          <tr>
            <td colspan="2">仪器值</td>
            <td colspan="2"><el-input v-model="form.key11" /></td>
            <td colspan="4"><el-input v-model="form.key12" /></td>
            <td colspan="4"><el-input v-model="form.key13" /></td>
            <td colspan="4"><el-input v-model="form.key14" /></td>
            <td colspan="4"><el-input v-model="form.key15" /></td>
          </tr>
          <tr>
            <td colspan="2">误差</td>
            <td colspan="2"><el-input v-model="form.key16" @blur="blur(16)" /></td>
            <td colspan="4"><el-input v-model="form.key17" @blur="blur(17)" /></td>
            <td colspan="4"><el-input v-model="form.key18" @blur="blur(18)" /></td>
            <td colspan="4"><el-input v-model="form.key19" @blur="blur(19)" /></td>
            <td colspan="4"><el-input v-model="form.key20" @blur="blur(20)" /></td>
          </tr>
          <tr>
            <td colspan="2">结论</td>
            <td colspan="2"><el-input v-model="form.key21" /></td>
            <td colspan="4"><el-input v-model="form.key22" /></td>
            <td colspan="4"><el-input v-model="form.key23" /></td>
            <td colspan="4"><el-input v-model="form.key24" /></td>
            <td colspan="4"><el-input v-model="form.key25" /></td>
          </tr>
          <tr>
            <td colspan="20">
              <div>线性变动过程记录：</div>
              <div>
                <el-input v-model="form.key26" type="textarea" :rows="4" />
              </div>
            </td>
          </tr>
          <!--  row -->
          <tr>
            <td colspan="2">第二次</td><td colspan="2">质控样1</td>
            <td colspan="4">质控样2</td><td colspan="4">水样1</td>
            <td colspan="4">水样2</td><td colspan="4">水样3</td>
          </tr>
          <tr>
            <td colspan="2">标准值</td>
            <td colspan="2"><el-input v-model="form.key27" /></td>
            <td colspan="4"><el-input v-model="form.key28" /></td>
            <td colspan="4"><el-input v-model="form.key29" /></td>
            <td colspan="4"><el-input v-model="form.key30" /></td>
            <td colspan="4"><el-input v-model="form.key31" /></td>
          </tr>
          <tr>
            <td colspan="2">仪器值</td>
            <td colspan="2"><el-input v-model="form.key32" /></td>
            <td colspan="4"><el-input v-model="form.key33" /></td>
            <td colspan="4"><el-input v-model="form.key34" /></td>
            <td colspan="4"><el-input v-model="form.key35" /></td>
            <td colspan="4"><el-input v-model="form.key36" /></td>
          </tr>
          <tr>
            <td colspan="2">误差</td>
            <td colspan="2"><el-input v-model="form.key37" @blur="blur(37)" /></td>
            <td colspan="4"><el-input v-model="form.key38" @blur="blur(38)" /></td>
            <td colspan="4"><el-input v-model="form.key39" @blur="blur(39)" /></td>
            <td colspan="4"><el-input v-model="form.key40" @blur="blur(40)" /></td>
            <td colspan="4"><el-input v-model="form.key41" @blur="blur(41)" /></td>
          </tr>
          <tr>
            <td colspan="2">结论</td>
            <td colspan="2"><el-input v-model="form.key42" /></td>
            <td colspan="4"><el-input v-model="form.key43" /></td>
            <td colspan="4"><el-input v-model="form.key44" /></td>
            <td colspan="4"><el-input v-model="form.key45" /></td>
            <td colspan="4"><el-input v-model="form.key46" /></td>
          </tr>
          <tr>
            <td colspan="20">
              <div class="table-row-item">
                <div class="item-label" style="flex: 0 0 80px;">实施人</div>
                <div class="item-value">
                  <el-input v-model="form.key47" />
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="4">业主代表确认</td>
            <td colspan="20">
              <el-input v-model="form.key48" type="textarea" placeholder="" />
              <div style="text-align: right;">
                <div><el-input v-model="form.key49" style="width:200px;margin: 10px 0;" placeholder="签字" /></div>
                <div><el-date-picker v-model="form.key50" style="width:200px;margin-bottom: 10px;" type="date" placeholder="年月日" value-format="yyyy-MM-dd" /></div>
              </div>
            </td>
          </tr>
        </table>
        <table style="margin-top: 20px;">
          <tr>
            <td width="150">上传文件：图片</td>
            <td colspan="6"><TableUpLoadFile ref="tableUploadFile" :files-list="filePath" :detail="detail" /></td>
          </tr><tr>
            <td width="150">上传文件：视频</td>
            <td colspan="6"><TableUpLoadVideo ref="tableUploadVideo" :video-list="videoPath" :detail="detail" /></td>
          </tr>
        </table>
      </div>
    </el-form>

  </div>
</template>

<script>
import { getDict } from '@/utils/dict'
import { fileUrl, staticImgUrl } from '@/url'
import TableUpLoadFile from './../TableUpLoadFile'
import TableUpLoadVideo from './../TableUpLoadVideo'
export default {
  name: 'Xj',
  components: {
    TableUpLoadFile,
    TableUpLoadVideo
  },
  props: {
    obj: {
      type: Object,
      default: null
    },
    maintenaIndex: {
      type: Number,
      default: 0
    },
    detail: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      imagePreview: false,
      videoLoadingFlag: false,
      imgLoadingFlag: false,
      typeList: [],
      fileUrl, staticImgUrl,
      yesNoList: [
        { value: '是', label: '是' },
        { value: '否', label: '否' }
      ],
      // 显示的图片数据
      filePath: [],
      showVideoPath: [],
      videoPath: [],
      form: {
        key0: '', key1: '', key2: '', key3: '', key4: '', key5: '', key6: '', key7: '', key8: '', key9: '', key10: '', key11: '', key12: '', key13: '', key14: '', key15: '', key16: '', key17: '', key18: '', key19: '', key20: '', key21: '', key22: '', key23: '', key24: '', key25: '', key26: '', key27: '', key28: '', key29: '', key30: '', key31: '', key32: '', key33: '', key34: '', key35: '', key36: '', key37: '', key38: '', key39: '', key40: '', key41: '', key42: '', key43: '', key44: '', key45: '', key46: '', key47: '', key48: '', key49: '', key50: '', key51: '', key52: '', key53: '', key54: '', key55: '', key56: '', key57: '', key58: '', key59: '', key60: '', key61: '', key62: '', key63: '', key64: '', key65: '', key66: '', key67: '', key68: '', key69: '', key70: '', key71: '', key72: '', key73: '', key74: '', key75: '', key76: '', key77: '', key78: '', key79: '', key80: '', key81: '', key82: '', key83: '', key84: '', key85: '', key86: '', key87: '', key88: '', key89: '', key90: '', key91: '', key92: '', key93: '', key94: '', key95: '', key96: '', key97: '', key98: '', key99: '', key100: '', key101: '', key102: '', key103: '', key104: '', key105: '', key106: '', key107: '', key108: '', key109: '', key110: '', key111: '', key112: '', key113: '', key114: '', key115: '', key116: '', key117: '', key118: '', key119: '', key120: '', key121: '', key122: '', key123: '', key124: '', key125: '', key126: '', key127: '', key128: '', key129: '', key130: '', key131: '', key132: '', key133: '', key134: '', key135: '', key136: '', key137: '', key138: '', key139: '', key140: '', key141: '', key142: '', key143: '', key144: '', key145: '', key146: '', key147: '', key148: '', key149: '', key150: '', key151: '', key152: '', key153: '', key154: '', key155: '', key156: '', key157: '', key158: '', key159: '', key160: '', key161: '', key162: '', key163: '', key164: '', key165: '', key166: '', key167: '', key168: '', key169: '', key170: '', key171: '', key172: '', key173: '', key174: '', key175: '', key176: '', key177: '', key178: '', key179: '', key180: '', key181: '', key182: '', key183: '', key184: '', key185: '', key186: '', key187: '', key188: '', key189: '', key190: '', key191: '', key192: '', key193: '', key194: '', key195: '', key196: '', key197: '', key198: '', key199: '', key200: '', key201: '', key202: '', key203: '', key204: '', key205: '', key206: '', key207: '', key208: '', key209: '', key210: '', key211: '', key212: '', key213: '', key214: '', key215: '', key216: '', key217: '', key218: '', key219: '', key220: '', key221: '', key222: '', key223: '', key224: '', key225: '', key226: '', key227: '', key228: '', key229: '', key230: '', key231: '', key232: '', key233: '', key234: '', key235: '', key236: '', key237: '', key238: '', key239: '', key240: '', key241: '', key242: '', key243: '', key244: '', key245: '', key246: '', key247: '', key248: '', key249: ''
      }
    }
  },
  mounted() {
    this.init()
    this.typeList = getDict('e015')
    // const infoStr = this.$store.getters.user.info
    // if (infoStr) {
    //   const info = JSON.parse(infoStr)
    //   this.form.key6 = info.realName
    // }
  },
  methods: {
    blur(num) {
      debugger
      if (this.form['key' + (num - 5)] !== '' && this.form['key' + (num - 10)] !== '') {
        this.form['key' + num] = (parseInt(this.form['key' + (num - 5)]) - parseInt(this.form['key' + (num - 10)])) / this.form['key' + (num - 10)] * 100 + '%'
      }
    },
    init() {
      if (this.obj.list) {
        const maintenaData = this.obj.list[this.maintenaIndex]
        if (maintenaData.filePath) {
          this.filePath = JSON.parse(maintenaData.filePath)
          this.$refs['tableUploadFile'].init(this.filePath)
        }
        if (maintenaData.videoPath) {
          this.videoPath = JSON.parse(maintenaData.videoPath)
        }
        if (maintenaData.formContent) {
          this.form = JSON.parse(maintenaData.formContent)
        }
        this.form.enterpriseName = this.obj.enterpriseName
        this.form.outletName = this.obj.outletName
      }
      if (this.obj.lastMaintenance) {
        var lastMaintenance = JSON.parse(this.obj.lastMaintenance.formContent)
        this.form.key1 = lastMaintenance.key1
        this.form.key2 = lastMaintenance.key2
        this.form.key3 = lastMaintenance.key3
        this.form.key0 = lastMaintenance.key0
      }
    },
    getFormData() {
      return {
        formContent: JSON.stringify(this.form),
        filePath: this.$refs.tableUploadFile ? this.$refs.tableUploadFile.getPaths() : [],
        videoPath: this.$refs.tableUploadVideo ? this.$refs.tableUploadVideo.getPaths() : [],
        maintenaIndex: this.maintenaIndex
      }
    },
    clearData() {
      this.form = {
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
